const path = require('path')

const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  mode: 'development',
  devServer: {
    port: 8081
  },
  // 打包入口文件
  entry: './src/index.ts',
  // 打包文件所在目录
  output: {
    // 指定打包文件所在目录
    path: path.resolve(__dirname, 'dist'),
    // 打包后的文件名
    filename: 'bundle.js',
    // 每次打包清除指定输出文件目录下的所有文件
    clean: true
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // test指定规则生效的文件  匹配一所有.ts结尾的文件
        test: /\.ts$/,
        // 使用的loader
        use: 'ts-loader',
        // 排除的目录
        exclude: /node_modules/
      }
    ]
  },

  // 配置webpack插件
  plugins: [
    new HTMLWebpackPlugin({
      template: path.join(__dirname, '/src/index.html')
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.json', '.js', '.jsx']
  }
}
